<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>role 模块</title>

    <script src="/pages/base.js"></script>
    <link rel="stylesheet" href="/css/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="/js/jquery.ztree.core.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script>

</head>
<body>
<div id="frameContent" class="content-wrapper" style="margin-left:0px;">
    <!-- 内容头部 -->
    <section class="content-header">
        <h1>
            角色管理
            <small>角色授权</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="all-order-manage-list.html">角色管理</a></li>
            <li class="active">角色授权</li>
        </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content" id="app">


        <form id="editForm" action="#" method="post">
            <div class="row data-type" style="margin: 0px">
                <div class="col-md-2 title">角色名称</div>
                <div class="col-md-4 data">
                    <input type="text" v-model="role.rname" class="form-control">
                </div>

                <div class="col-md-2 title">角色描述</div>
                <div class="col-md-4 data">
                    <input type="text" v-model="role.rdesc" class="form-control">
                </div>

            </div>
        </form>

        <ul id="treeDemo" class="ztree"></ul>
        <!--工具栏-->
        <div class="box-tools text-center">
            <button type="button" class="btn bg-maroon" @click="addRole">添加</button>
            <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
        </div>
    </section>
    <!-- 正文区域 /-->
</div>

<!-- 内容区域 /-->
<script>

    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };

    new Vue({
        el:"#app",
        data:{
            role:{},
            zTree:null
        },
        methods:{

            addRole(){

                let arr = this.zTree.getCheckedNodes(true);
                console.log(arr);
                // 拿到节点的id
                // 2. 把多个id 放到数组中,把数组提交到服务器
                let ids = [];
                for(let i = 0 ; i < arr.length ; i++){
                    // 遍历选中的 节点的id
                    ids.push(arr[i].id);
                }

                axios({
                    method:"POST",
                    url:"http://localhost:8080/roles",
                    data:{
                        role:this.role,
                        pids:ids
                    }
                }).then(resp=>{
                    // 添加成功  页面跳转
                    alert(resp.data.msg);
                    location.href = "/pages/role/role-list.html";
                })
            },
            //查询权限
            findPermission(){
                axios({
                    method:"GET",
                    url:"http://localhost:8080/permission"
                }).then(resp=>{
                    console.log(resp)
                    let zNodes = resp.data;
                    this.zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                })
            }
        },
        created(){
            this.findPermission();
        }
    });

</script>
</body>

</html>